<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
	<title>我的网盘</title>
	<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
    <link rel="stylesheet" type="text/css" href="/static/css/mydisk.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/myupload.css"/>
	<link rel="stylesheet" type="text/css" href="/static/webcontextmenu/web.contextmenu.css"/>
</head>
<body>
{% load myfilters %}

{% include 'header.html' %}

<section>
	<!-- side-menu start -->
	<div class="side-menu">
		<div class="side-menu-list">
			<div class="list-item"><a href="javascript:" class="btn-do-listallfile current">我的文件</a></div>
            <div class="list-item"><a href="javascript:" class="btn-do-sharelist">我的分享</a></div>
            <!--
			<div class="list-item"><a href="javascript:">文档</a></div>
			<div class="list-item"><a href="javascript:">图片</a></div>
			<div class="list-item"><a href="javascript:">视频</a></div>
			<div class="list-item"><a href="javascript:">音乐</a></div>
            <div class="list-item"><a href="javascript:"><span class="iconfont icon-trash"></span> 回收站</a></div> -->
		</div>
	</div>
	<!-- end side-menu -->
	
	<!-- explorer start -->
	<div class="explorer">
		<div class="nav-buttons">
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-do-listallfile">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                </button>
                <button type="button" class="btn btn-default btn-do-prev">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-back"></use>
                    </svg>
                </button>
            </div>
			<label class="btn btn-primary" id="filePicker">
				<span class="iconfont icon-upload"></span> 上传文件
			</label>
			<button type="button" class="btn btn-default" id="btn-do-newfolder">
				<span class="iconfont icon-newfolder"></span> 新建文件夹
			</button>
			<div class="btn-group file-operator">
				<button type="button" class="btn btn-default" id="btn-do-share">
					<span class="iconfont icon-share"></span> 分享
				</button>
				<button type="button" class="btn btn-default" id="btn-do-download">
					<span class="iconfont icon-download"></span> 下载
				</button>
				<button type="button" class="btn btn-default" id="btn-do-delete">
					<span class="iconfont icon-trash"></span> 删除
				</button>
				<button type="button" class="btn btn-default" id="btn-do-moveto">
					<span class="iconfont"></span> 移动到
				</button>
			</div>
			<div class="btn-group">
				<label class="btn btn-default check-all">
					<span class="iconfont icon-quanxuan"></span>
				</label>
				<button class="btn btn-default btn-file-view">
					<span class="iconfont icon-menu1"></span>
				</button>
                <!--
				<button type="button" class="btn btn-default dropdown-toggle btn-file-order" data-toggle="dropdown">
					<span class="iconfont icon-orderby"></span>
				</button>
				<ul class="dropdown-menu" role="menu">
					<li><a href="javascript:">文件名</a></li>
					<li><a href="javascript:">大小</a></li>
					<li><a href="javascript:">时间</a></li>
				</ul>
                -->
			</div>
			<div class="search-nav pull-right">
                <form action="javascript:" id="fm-search">
                    <input type="text" name="keywords" class="form-control" placeholder="搜索文件" />
                    <span class="iconfont icon-search" id="btn-do-search"></span>
                </form>
			</div>
		</div>
		
		<div class="scrollable file-explorer">
			<div class="scroll-container">
                <input type="hidden" id="data_file_prev" value="">
                <input type="hidden" id="data_file_parent" value="">
				<div class="file-list ">
					{% for file in files %}
					<div class="file-item" id="file{{ file.id }}" data-file-id="{{ file.id }}" data-file-type="{{ file.file_type }}">
						<div class="file-name">
                            <svg class="icon" aria-hidden="true">
                                {% if file.file_type == 1 %}
                                    <use xlink:href="#icon-folder-c"></use>
                                {% else %}
                                    <use xlink:href="{{ file.file_ext | file_ext_format }}"></use>
                                {% endif %}
							</svg>
							<span class="file-name-text">{{ file.file_name }}</span>
						</div>
						<div class="file-length">
                            {% if file.file_length %}
                                {{ file.file_length | filesizeformat }}
                            {% else %}
                                -
                            {% endif %}
                        </div>
						<div class="last-modify-date">{{ file.file_upload_date | datetimeformat }}</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
	<!-- end explorer -->
</section>

<div class="my-upload panel closed panel-primary" data-csrf-token="{{ csrf_token }}">
	<div class="my-upload-header panel-heading">
		<span class="glyphicon glyphicon-upload"></span>
		<i> 文件上传</i>
		<span class="iconfont icon-close btn-close-myupload"></span>
		<span class="iconfont icon-minimize btn-minimize-myupload"></span>
	</div>
	<ul class="list-group"></ul>
</div>

<script type="text/javascript" src="/static/js/jquery.js"></script>
<script>$.ajaxSetup({headers:{"X-CSRFToken":"{{ csrf_token }}"}})</script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/static/webcontextmenu/web.contextmenu.js" ></script>
<script type="text/javascript" src="/static/layui/layui.js" ></script>
<script type="text/javascript" src="/static/nicescroll/jquery.nicescroll.js"></script>
<script type="text/javascript" src="/static/webuploader/webuploader.min.js" ></script>
<script type="text/javascript" src="/static/js/clipboard.min.js" ></script>
<script type="text/javascript" src="/static/js/mydisk.js" ></script>
<script type="text/javascript" src="/static/js/iconfont.js" ></script>

<script type="text/x-jquery-tmpl" id="template-file-item">
    <div class="file-item" id="file${id}" data-file-id="${id}" data-file-type="${file_type}">
        <div class="file-name">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="${file_icon}"></use>
            </svg>
            <span class="file-name-text">${file_name}</span>
        </div>
        <div class="file-length">${file_length}</div>
        <div class="last-modify-date">${file_upload_date}</div>
    </div>
</script>

<script type="text/x-jquery-tmpl" id="template-file-list">
{{ '{{' }}each(i, file) files{{ '}' }}{{ '}' }}
    <div class="file-item" id="file${file.id}" data-file-id="${file.id}" data-file-type="${file.file_type}">
        <div class="file-name">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="${file.file_icon}"></use>
            </svg>
            <span class="file-name-text">${file.file_name}</span>
        </div>
        <div class="file-length">${file.file_length}</div>
        <div class="last-modify-date">${file.file_upload_date}</div>
    </div>
{{ '{{' }}/each{{ '}' }}{{ '}' }}
</script>

<script type="text/x-jquery-tmpl" id="template-new-folder">
    <div class="file-item" data-new-folder>
        <div class="file-name">
            <form role="form" action="javascript:" class="form-inline" id="fm-new-folder">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-folder-c"></use>
                </svg>
                <span class="file-name-text">
                    <input class="form-control" id="new_folder_name" autocomplete="off" required pattern="^[\w|\-|\u4e00-\u9fa5]+$" oninvalid="setCustomValidity('文件夹名称错误')" oninput="setCustomValidity('')">
                    <button type="submit" class="btn btn-default">
                        <span class="iconfont icon-gou"></span>
                    </button>
                    <button type="button" class="btn btn-default" id="btn-new-folder-cancel">
                        <span class="iconfont icon-cha"></span>
                    </button>
                </span>
            </form>
        </div>
    </div>
</script>

<script type="text/x-jquery-tmpl" id="template-share-box">
    <div class="share-box">
        <div class="share-buttons">
            <button type="button" class="btn btn-primary" id="btn-share-public">公开分享</button>
            <button type="button" class="btn btn-primary" id="btn-share-primary">私密分享</button>
        </div>
        <div class="share-result-inputs" style="margin-top:10px;display:none;">
            <div class="form-group">
                <input type="text" class="form-control" autocomplete="off" id="share-result-url">
            </div>
            <div class="form-group" style="width:100px;">
                <input type="text" class="form-control" autocomplete="off" id="share-result-pwd">
            </div>
        </div>
    </div>
</script>

<script type="text/x-jquery-tmpl" id="template-share-list">
    <table class="table" style="border-bottom:1px solid #ddd;">
        {{ '{{' }}each(i, share) shares{{ '}' }}{{ '}' }}
        <tr>
            <td><a href="/s/${share.id}" target="_blank">${share.desc}</a></td>
            <td>${share.password}</td>
            <td>
                <a href="javascript:" title="取消分享" data-share data-share-id="${share.id}"><span class="iconfont icon-trash"></span></a>&nbsp;&nbsp;
                <a href="javascript:" title="双击复制链接" data-clipboard-text="${share.clink}"><span class="iconfont icon-link"></span></a>
            </td>
            <td style="text-align:right">${share.share_date}</td>
        </tr>
        {{ '{{' }}/each{{ '}' }}{{ '}' }}
    </table>
</script>
</body>
</html>
